<template>
  <div class="lx-article__wrap">
    <!-- 背景图片 -->
    <div class="lx-article__header">
      <img class="lx-article__cover" :src="article.thumbnail" />
      <div class="lx-article__header--content">
        <div class="lx-article__title">{{ article.title }}</div>
        <div class="flex lx-article__desc-wrap">
          <div class="lx-article__desc flex">
            <div class="lx-article__autor">
              <i class="iconfont icon-jiaoseguanli1 auth-icon"></i>
              {{ article.createByName || "佚名" }}
            </div>
            <span class="lx-article__header--line">·</span>
            <div class="lx-article__time">
              <i class="iconfont icon-rili time-icon"></i>
              {{ article.createTime }}
            </div>
            <span class="lx-article__header--line">·</span>
            <div class="lx-article__viewcount">
              <i class="iconfont icon-ego-hot hot-icon"></i>
              {{ article.viewCount || 0 }}
            </div>
            <span class="lx-article__header--line">·</span>
            <div class="lx-article__comment comment-icon">
              <i class="iconfont icon-pinglun1"></i>
              {{ article.commentCount || 0 }}
            </div>
            <span class="lx-article__header--line">·</span>
            <div class="lx-article__star star-icon">
              <i class="iconfont icon-dianzan"></i>
              {{ article.star || 0 }}
            </div>
          </div>
          <div class="lx-article__category flex flex--c ml-10">
            <span style="margin-right: 12px" v-if="article.categoryName">
              <i
                class="iconfont icon-leimupinleifenleileibie2 category-icon"
              ></i>
              {{ article.categoryName || "" }}
            </span>
            <span v-if="article.tagList?.length">
              <i class="iconfont icon-biaoqian1 label-icon"></i>
              {{
                article.tagList
                  ? article.tagList
                      .slice(0, 2)
                      .map((item) => item.tagName)
                      .join(" ")
                  : ""
              }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="lx-article__body article__md__box">
      <div class="lx-article__summary-wrap">
        <div class="lx-article__summary-title">
          <i class="pr-20">🌺</i>
          前言
        </div>
        <blockquote class="lx-article__summary">
          {{ article.summary }}
        </blockquote>
        <hr class="hr-line--g" style="border-color: #39c5bb" />
      </div>
      <div v-html="articleToc"></div>
      <div v-html="articleHtml" v-highlight></div>
      <!-- 最后更新时间 -->
      <div class="article-update-time">
        <span>文章最后更新于 {{ article.updateTime }}</span>
      </div>
      <!-- 作者信息 -->
      <blockquote class="author-desc">
        <div>作者：{{ article.createByName }}</div>
        <div>版权声明：转载请注明文章出处</div>
      </blockquote>
      <comment-list
        v-if="article.isComment === '0'"
        :author="article.createBy"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useArticleRender } from "./hooks/useArticleRender";
import CommentList from "./components/CommentList.vue";
import "highlight.js/styles/vs2015.css";
// import "highlight.js/styles/idea.css";
// import "highlight.js/styles/atom-one-dark.css";
// import "highlight.js/styles/stackoverflow-dark.css";
// import "highlight.js/styles/dracula.css";
// import "highlight.js/styles/monokai.css";
// import "highlight.js/styles/lioshi.css";
// import "highlight.js/styles/solarized-dark.css";
const { article, articleHtml, articleToc } = useArticleRender();
</script>
<style lang="scss" scoped>
.lx-article__wrap {
  min-height: calc(100% - var(--lx-footer-height));
}
.lx-article__header {
  position: relative;
  width: 100%;
  height: 300px;
}
.lx-article__cover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.lx-article__header--content {
  max-width: 900px;
  margin: 0 auto;
  // height: 180px;
  position: absolute;
  bottom: 10px;
  left: 20%;
  color: #fff;
  white-space: nowrap;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  z-index: 10;
  // color: #fff;
  font-size: 14px;
  background-color: #44474488;
  padding: 0 20px;
}
.lx-article__title {
  font-size: 40px;
  line-height: 60px;
  // padding: 0 20px;
}
// .lx-article__desc-wrap {
//   padding: 0 20px;
// }
.lx-article__desc {
  // width: 100%;
  height: 60px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  .auth-icon {
    color: rgb(255, 83, 144);
  }
  .time-icon {
    color: rgb(64, 158, 255);
  }
  .hot-icon {
    color: rgb(255, 0, 0);
  }
  .star-icon {
    color: rgb(255, 113, 60);
  }
  .comment-icon {
    color: #39c5bb;
  }
}
.lx-article__category {
  min-width: 100px;
  height: 60px;
  span {
    padding: 3px 10px;
    background-color: #eee;
    border-radius: 3px;
    font-size: 14px;
    color: #797979;
    transition: all 0.3s;
    // cursor: pointer;
    user-select: none;
    &:hover {
      background-color: orange;
      color: #fff;
    }
  }
  .category-icon {
    color: rgb(255, 217, 119);
  }
  .label-icon {
    color: rgb(140, 123, 253);
  }
}
.lx-article__header--line {
  margin: 0 10px;
}
.lx-article__summary {
  font-size: 16px;
  line-height: 20px;
}
.lx-article__body {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 20px 40px;
}
.lx-article__summary-title {
  font-size: 20px;
  font-weight: bold;
  height: 40px;
  line-height: 40px;
}
.lx-article__summary {
  background-color: #e7e7e7;
  border-radius: 5px;
  padding: 20px;
}
.article-update-time {
  color: #797979;
  font-size: 12px;
  margin: 20px 0;
  user-select: none;
}
.author-desc {
  line-height: 2;
  border-left: 0.2rem solid rgb(3, 169, 244);
  padding: 10px 1rem;
  background-color: #ecf7fe;
  border-radius: 4px;
  margin: 0 0 40px 0;
  user-select: none;
  color: #000;
  font-weight: bold;
}
</style>
